<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq-demo-06page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css">
	<script type="text/javascript" src="script/lib/jquery-1.11.2.js"></script>
	<script type="text/javascript" src="script/lib/jquery.mobile-1.4.5.js"></script>
</head>
<body>
	<div data-role="page">
		<div data-role="header" data-theme="a" data-position="fixed">
			<h2>相册</h2>
		</div>
		<div role="main" class="ui-content">
			<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>
			<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="true" style="max-width:400px;">
			    <div data-role="header" data-theme="a">
			    <h1>Delete Page?</h1>
			    </div>
			    <div role="main" class="ui-content">
			        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
			    <p>This action cannot be undone.</p>
			        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
			        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
			    </div>
			</div>

			<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="请输入需要查询的关键字">
			    <li><a href="#">Acura</a></li>
			    <li><a href="#">Audi</a></li>
			    <li><a href="#">BMW</a></li>
			    <li><a href="#">Cadillac</a></li>
			    <li><a href="#">Ferrari</a></li>
			</ul>
		</div>
		<div data-role="footer" data-position="fixed">
			<h2>footer</h2>
		</div>
	</div>
</body>
</html>